<template>
  <div>
    <Header />
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>{{ routes.meta.title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main">
      <PersonalNav />
      <router-view></router-view>
    </div>
    <Tabbar />
    <Footer />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Header from '@/components/header/index.vue';
import Footer from '@/components/footer/index.vue';
import Tabbar from '@/components/tabbar/index.vue';
import PersonalNav from './components/personal-nav/index.vue';
import { useRoute } from 'vue-router';

export default defineComponent({
  components: { Header, Footer, Tabbar, PersonalNav },
  setup() {
    const routes = useRoute();
    return {
      routes,
    };
  },
});
</script>

<style lang="scss" scoped>
.breadcrumb {
  width: 100%;
  border-bottom: 1px solid #ddd;
  padding: 8px 0px;
  font-size: 12px;
  div {
    width: 1200px;
    margin: 0 auto;
    padding-left: 10px;
  }
}
.main {
  width: 1200px;
  margin: 30px auto;
  display: flex;
}
</style>
